<script setup lang="ts">
import { ref } from 'vue'
import { timeFormat } from '@/hooks/util'
import * as xyApi from '@/api/xy'
import { message } from 'ant-design-vue'

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  showSizeChanger: boolean
}
const pagination = ref<Pagination>({ page: 1, pageSize: 10, total: 0, showSizeChanger: false })
let loading = ref<boolean>(false)

interface SearchParams {
  currentPage: number
  pageSize: number
  [propName: string]: any
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})

const myModal = ref()

let putawayId = ref<string>()
const showModal = (id: string) => {
  searchParams.value.putawayId = id
  searchParams.value.currentPage = 1
  pagination.value = {}
  pagination.value = { page: 1, pageSize: 10, total: 0 }
  myModal.value?.showModal()
  getList()
}

const getList = async () => {
  loading.value = true
  try {
    let { state, data, message: msg } = await xyApi.automatePutawayTaskList(searchParams.value)
    if (state === 200) {
      dataSource.value = data.list
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize
  searchParams.value.currentPage = pagination.value.current as number
  getList()
}

defineExpose({
  showModal,
})

const dataSource = ref<Array<any>>([])
const columns = [
  {
    title: '执行状态',
    key: 'carryOutState',
    width: 100,
  },
  {
    title: '城市',
    key: 'cityName',
    width: 180,
  },
  {
    title: '院线',
    key: 'limitName',
    width: 180,
  },
  {
    title: '平台账号',
    key: 'robotNickName',
    width: 180,
  },
  {
    title: '执行时间',
    key: 'taskTime',
    width: 180,
  },
  {
    title: '执行日志',
    key: 'errorMessage',
    width: 180,
  },
]
</script>

<template>
  <MyModal ref="myModal" title="任务记录" :top="25" :width="1000">
    <template #content>
      <a-table
        style="overflow-y: scroll; max-height: 680px"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :loading="loading"
        @change="changePage"
        :scroll="{ y: 300 }"
      >
        <template #emptyText>
          <a-empty description="暂无数据" />
        </template>

        <template #headerCell="{ column }">
          <template v-if="column.key === 'id'">
            <div>id</div>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'carryOutState'">
            <div style="width: 100px">
              <a-tag color="red" v-if="record.carryOutState == '-1'">异常</a-tag>
              <a-tag color="red" v-if="record.carryOutState == '0'">未开始</a-tag>
              <a-tag color="green" v-if="record.carryOutState == '1'">已完成</a-tag>
              <a-tag color="blue" v-if="record.carryOutState == '2'">进行中</a-tag>
            </div>
          </template>

          <template v-else-if="column.key === 'cityName'">
            <div style="width: 120">
              {{ record.cityName }}
            </div>
          </template>

          <template v-else-if="column.key === 'limitName'">
            <div style="width: 120">
              {{ record.limitName }}
            </div>
          </template>

          <template v-else-if="column.key === 'robotNickName'">
            <div style="width: 120">
              <a-tag color="blue">{{ record.robotNickName }}</a-tag>
            </div>
          </template>

          <template v-else-if="column.key === 'taskTime'">
            <div style="width: 150px">
              {{ timeFormat(record.taskTime) }}
            </div>
          </template>

          <template v-else-if="column.key === 'errorMessage'">
            <a-tooltip placement="top">
              <template #title>
                <span>{{ record.errorMessage || '无' }}</span>
              </template>
              <div class="hiddenText">{{ record.errorMessage || '无' }}</div>
            </a-tooltip>
          </template>
        </template>
      </a-table>
    </template>
  </MyModal>
</template>

<style scoped lang="less">
::-webkit-scrollbar {
  width: 0;
}

.hiddenText {
  display: inline-block;
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
